<template>
	<div>

		<!-- <div class="add">
			<span>添加库房</span>
			<el-button icon="el-icon-plus" type='danger' circle  @click="drawer = true"></el-button>
		</div> -->
		
		<van-button icon="plus" type="primary" size="large" @click="drawer = true">添加库房</van-button>
		
		<el-drawer size="80%"
		  title="添加库房"
		  :visible.sync="drawer"
		  :direction="direction"
		>
		  <el-input style="padding: 10px;" v-model="name" placeholder="请输入添加的库房名称"></el-input>
		  <el-button type="primary" v-on:click='add_warehouse()'   style="display: block; width: 80%; margin: 10px auto;" >添加库房</el-button>
		</el-drawer>
		
		
		
		
		
		
		
		
		
		
		

		<!-- <div class="item" v-for='item in item_list'>
			<span>{{item.warehouse_name}}</span>
			
			<span class="ch">修改</span>
			<span class="del">删除</span>
		</div> -->
		
		<van-swipe-cell v-for="item in item_list">
		  <van-cell  :title="item.warehouse_name" :value="item.phone" />
		  <template #right>
		    <van-button square type="danger" text="删除" @click="del_warehouse(item.id)"/>
		    <van-button square type="info" text="改名" @click="updateClick(item.id, item.warehouse_name)"/>
		    
		  </template>
		  
		</van-swipe-cell>
		
		<el-drawer
		  size="80%"
		  title="修改库房名称"
		  :visible.sync="drawerWarehouse"
		  :direction="direction"
		>
		
			<div style="width: 100%;text-align: center; ">当前库房名:<span style="color: red;">{{name}}</span></div>
		  <el-input style="padding: 10px;" v-model="new_name" placeholder="请输入更新后的库房名"></el-input>
		 
		  <el-button type="primary" v-on:click='update_warehouse()'   
		  style="display: block; width: 80%; margin: 10px auto;" >
		  修改库房名称
		  </el-button>
		</el-drawer>
		
		
		<div style="margin-bottom: 60px;width: 100%;"></div>
		
		

	</div>
</template>

<script>
	import {
		// add_unit_url, select_all_unit_url,
		add_warehouse_url,select_all_warehouse_url,del_warehouse_url,update_warehouse_url
		
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				item_list:[{'id': 1, 'unit_name': '根'}, {'id': 2, 'unit_name': '米'}],
				drawer: false,
				drawerWarehouse: false,
				direction: 'ttb',
				warehouse_id: null,
				name: '',
				new_name: null,
			}
		},
		methods: {
			add_warehouse(){
				this.$axios({
					method: 'GET',
					url: add_warehouse_url,
					params: { //这里是发送给后台的数据
						warehouse_name: this.name,
					}
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						
						this.$message({
							message: "仓库："+this.new_unit+"   添加成功",
							type: 'success'
						})
						
						this.get_all_warehouse()
						
						this.drawer = false
					} else {
						console.log(response.data.errorMsg)
						// this.$Message.error('config')
						this.$message({
							message: response.data.errorMsg + '!!!',
							type: 'error'
						})
					}
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
			
			get_all_warehouse(){
				
				this.$axios({
					method: 'GET',
					url: select_all_warehouse_url,
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					this.item_list = response.data.resultBody.reverse()
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
				
			},
		
			del_warehouse(warehouse_id){
				this.$axios({
					method: 'POST',
					url: del_warehouse_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						warehouse_id: warehouse_id,
			
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
					if (response.data.status == 1) {
						
						this.$notify({ type: 'success', message: '删除成功' });
						this.get_all_warehouse()
				
						
					} else {
						// console.log(response.data.errorMsg)
						this.$notify({ type: 'error', message: '危险删除，如确需删除请联系系统管理员，具体原因：' + response.data.errorMsg });
					}
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
		
			update_warehouse(){
				this.$axios({
					method: 'POST',
					url: update_warehouse_url,
					data: this.qs.stringify({ //这里是发送给后台的数据
						warehouse_id: this.warehouse_id,
						warehouse_name: this.new_name
				
					})
				}).then((response) => { //这里使用了ES6的语法
					// console.log(response) //请求成功返回的数据
							
					this.$notify({ type: 'success', message: response.data.resultBody });
					this.get_all_warehouse()
					this.drawerWarehouse = false
					// location.reload();
				}).catch((error) => {
					console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			},
		
			updateClick(id, name){
				
				this.warehouse_id = id
				this.name = name
				this.new_name = name
				
				this.drawerWarehouse = true
				
				
				
			},
		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			
			this.get_all_warehouse()

		},
	}
</script>

<style scoped lang="less">
	.add {
		width: 100%;
		height: 60px;
		background-color: #F0F0F0;
		line-height: 60px;

		span {
			font-size: 20px;
			font-weight: 700;
			display: inline-block;
			margin-left: 20px;
		}

		.el-button {
			display: inline-block;
			margin-left: 20px;
		}
	}
	
	.item{
		position: relative;
		width: 100%;
		height: 45px;
		line-height: 45px;
		font-size: 18px;
		font-weight: 600;
		background-color: #F0F0F0;
		margin-top: 8px;
		span{
			margin-left: 10px;
		}
		
		.del{
			display: inline-block;
			position: absolute;
			right: 10px;
			font-weight: 400;
			color: darkred;
		}
		
		.ch{
			display: inline-block;
			position: absolute;
			right: 60px;
			font-weight: 400;
			color: seagreen;
		}
	}
</style>
